<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>组件</title>
    <script src="./vue.js"></script>
</head>

<body>
    <div id="app">
        <my-component></my-component>
        <local-component></local-component>
        <table>
            <tr is="my-row"></tr>
        </table>
    </div>
     <div id="test">
        <my-component></my-component>
    </div>
        
    <script>
        // 全局注册组件
        // para1: 标签名/组件名
        // para2: options,组件选项
        // template:模板,组件对应的html模板
        // 模板只能有一个根标签
        Vue.component('my-component', {
            template: ' <div><h1>xiaozuxi</h1><p>小许子</p></div>',
        })

        var app = new Vue({
            el: '#app',
            // components: 局部注册组件;仅在当前vue实例中可用
            components:{
                // key:{} 组件名称
                // value:{} 组建的选项对象
                'local-component':{
                    template:'<div>这是我注册的一个局部组件<h2>{{title}}</h2></div>',
                    // 组件中data选项必须是一个function;
                    // function返回需要使用的数据对象
                    data: function (){
                        return {
                            title:'聊天'
                        }
                    }
                },
                'my-row':{
                    template:'<tr><td>001</td><td>002</td><td>003</td></tr>'     
                },
            }
        })
        var test = new Vue({
            el: '#test',
        });
    </script>
</body>

</html>